<template>
   <div
    class="nimble-island"
    :style="appStore.islandOptions"
    @click.stop="handleExpandIsland">
        <div style="position:relative" class="full-h">
            <transition name="island">
                <div class="full-h" v-if="isCollapse">
                    <!-- 自定义组件 -->
                    <component
                    :is="appStore.islandCurrentData.islandComponent" 
                    :flag="'collapse'"></component>
                </div>
            </transition>
            <transition name="island">
                <div class="full-h" style="padding: 15px 20px;" v-if="isExpand">
                    <div class="island-expand-content">
                      <!-- 自定义组件 -->
                      <component :is="appStore.islandCurrentData.islandComponent" :flag="'expand'"></component>
                    </div>
                    <div class="island-nav">
                        <div class="flex-start full-layout flex-nowarp">
                            <div 
                            v-for="item in appStore.getIslandApp" :key="item.id"
                            @click="appStore.setIslandData(item)"
                            class="island-app-box flex-center"
                            :class="item.id === appStore.islandCurrentData.id ? 'island-app-active' : ''">
                                <div class="island-app-icon">
                                    <img :src="CheckFullUrl(item.icon)" :title="item.name" :style="{backgroundColor:item.background}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script lang='ts'>
import { onBeforeUnmount, onMounted, reactive, toRefs } from 'vue';
import islandComponents from '@/components/island/components';
import { useAppStore } from '@/store/app';
import useCheck from '@/hooks/useCheck';
export default {
    name:'island',
    props: {

    },
    components: {
        ...islandComponents
    },
    emits:[],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            timer: null as any,
            isExpand:false,
            isCollapse:false
        });
        let methods = {
            handleExpandIsland ()
            {
                if (data.isExpand) return;
                let dom:any = document.querySelector('.nimble-island');
                data.timer && clearTimeout(data.timer);
                data.timer = setTimeout(() => 
                {
                    // data.isCollapse = false;
                    data.isExpand = true;
                    // dom.style.animation = 'islandAnimationExpand 1.5s linear 0s forwards';
                    setTimeout(() => 
                    {
                        data.isCollapse = false;
                        dom.style.animation = 'islandAnimationExpand 1.25s linear 0s forwards';
                    }, 200);
                }, 260);
            },
            handleCollapseIsland ()
            {
                if (data.isCollapse) return;
                let dom:any = document.querySelector('.nimble-island');
                data.timer && clearTimeout(data.timer);
                data.timer = setTimeout(() => 
                {
                    data.isExpand = false;
                    dom.style.animation = 'islandAnimationCollapse .7s ease-in-out 0s forwards';
                    setTimeout(() => 
                    {
                        data.isCollapse = true;
                    }, 800);
                }, 280);
               
            }
        };

        onMounted(() => 
        {
            appStore.initIsland();
            data.isCollapse = true;
            document.body.addEventListener('click', methods.handleCollapseIsland); 
        });

        onBeforeUnmount(() => 
        {
            document.body.removeEventListener('click', methods.handleCollapseIsland); 
        });
        return { 
            ...toRefs(data),
            ...methods,
            appStore,
            ...useCheck()
        };
    }
};
</script>

<style scoped lang="scss">
@keyframes islandAnimationHide {
  0% {
      display: block;
      opacity: 1;
      // transform: translateY(0);
  }
  60% {
      // transform: translateY(-1%);
      opacity: .6;
  }
  80% {
      // transform: translateY(-10%);
      opacity: .3;
  }
  100% {
      display: none;
      opacity: 0;
      // transform: translateY(-100%);
  }
}

@keyframes islandAnimationShow {
  0% {
      display: none;
      opacity: 0;
      // transform: translateY(-100%);
  }
  60% {
      opacity: .3;
      // transform: translateY(-10%);
  }
  80% {
      opacity: .6;
      // transform: translateY(-1%);
  }
  100% {
      opacity: 1;
      // transform: translateY(0);
      display: block;
  }
}

.nimble-island {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--el-bg-color-island);
    border-radius: 80px;
    width: 250px;
    height: 40px;
    cursor: pointer;
    transition: all .5;
    color: $TextColor;
    font-size: 14px;
    z-index: 6000;
    overflow: hidden;

    // &:hover {
    //     box-shadow: 0 0 3px 2px $ShadowColor;
    // }
}

.island-enter-active {
    animation: islandAnimationShow .5s ease-in-out 0s forwards;
}

.island-leave-active {
    animation: islandAnimationHide .5s ease-in-out 0s forwards;
}

.island-expand-content {
    max-height: 200px;
    // min-height: 210px;
}

.island-nav {
    height: 50px;
    border-radius: 5px;
    margin: 15px 0 0;
    width: 100%;
    // background-color: var(--el-bg-color-mask);
    background-color: var(--el-bg-island-nav);
    max-height: 50px;
    overflow-y: hidden;
    overflow-x: auto;

    .island-app-box {
        background-color: transparent;
        padding: 7px;
        margin: 10px 5px;
        border-radius: 5px;
    }
    .island-app-active {
        background-color: var(--el-bg-island-active);
        // background-color: #fbfbfb6b;
    }

    .island-app-icon {
        width: 30px;
        height: 30px;
        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
        transition: 0.2s;
        cursor: pointer;
        overflow: hidden;
        border-radius: 5px;
        background-color: var(--el-bg-color-page);

        &:hover {
            transform: scale(1.1);
        }
    }
}

</style>
